<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>=^.^=</title>
<style>
canvas{
	display: block;
}
button{
	font-size: 20px;
	padding: 10px;
}
</style>
</head>
<body>
<button type="button" id="button">load 746KB</button>

<script src="three.min.js"></script>
<script src="../dist/ZipLoader.js"></script>
<script>
// START three.js init ---
var width  = 500;
var height = 500;
var clock = new THREE.Clock();

var scene  = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, width / height, 0.001, 10 );
camera.position.set( 0, 1.3, 1.2 );
var renderer = new THREE.WebGLRenderer( { antialias: true, stencil: false } );
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

var lookat = new THREE.Vector3( 0, .8, 0 );
var mixer;

scene.add(
	new THREE.HemisphereLight( 0x443333, 0x332222 ),
	new THREE.AmbientLight( 0xcccccc )
);

( function anim () {

  var delta = clock.getDelta();
	var elapsed = clock.getElapsedTime();

  if ( mixer ) { mixer.update( delta ); }

	camera.position.set(
		Math.sin( elapsed * .5 ) * 1.5,
		1.5,
		Math.cos( elapsed * .5 ) * 1.5
	);
	camera.lookAt( lookat );

	requestAnimationFrame( anim );
	renderer.render( scene, camera );

} )();
// END three.js init ---




// Prepare to use THREE.js in ZipLoader
ZipLoader.install( { THREE: THREE } );
var loader = new ZipLoader( './Alicia.zip' );
var button = document.getElementById( 'button' );

// loader on progress
loader.on( 'progress', function ( e ) {

	button.innerHTML = ( ( e.loaded / e.total * 100 ) | 0 ) + '%';
	console.log( 'loading', e.loaded / e.total * 100 + '%' );

} );


// loader on load
loader.on( 'load', function ( e ) {

	// use loadThreeJSON method to get geometry and materials
	// just like THREE.JSONLoader
	// You will get `result.geometry` and `result.materials`
	var result = loader.loadThreeJSON( 'Alicia/Alicia.json' );

	result.materials.forEach( function ( material ) {

		material.skinning = true;
		material.side = THREE.DoubleSide;

	} );

	var mesh = new THREE.SkinnedMesh(
		result.geometry,
		result.materials
	);
	mesh.position.z = -0.2;

	mixer = new THREE.AnimationMixer( mesh );
	var action = mixer.clipAction( result.geometry.animations[ 0 ] );
	action.setEffectiveWeight( 1 );
	action.loop = THREE.LoopRepeat;
	action.play();

	scene.add( mesh );

	loader.clear();

} );


// on button click
button.addEventListener( 'click', function ( e ) {

	loader.load();
	e.target.disabled = true;

} );
</script>

</body>
</html>
